<template>
    <div class="Article-list">

      <!-- 下拉刷新  将整个list列表包起来-->
      <van-pull-refresh
        :success-text="refreshSuccessText"
        :success-duration="1500"
        v-model="isRefreshLoading"
        @refresh="onRefresh">
      <!-- list列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell  :title="article.title" /> -->
        <ArticleItem
           v-for="(article,index) in list" :key="index"
           :article='article'
           
        ></ArticleItem>
      
      </van-list>
    </van-pull-refresh>

    </div>
</template>

<script>
// 导入频道列表的接口方法
import {articleinfo} from '@/api/article'
// 引入子组件
import ArticleItem from '@/components/article-item/index.vue'
export default {
  name: 'articlelist',
  props: {//接收父组件传递过来的数据channel
     channel: {
      type: Object,
      required: true//这个数据是必须的
    }
  },
  components: {
    ArticleItem
  },
  data () {
   return {
      list: [],  // 存储列表数据的数组
      loading: false, // 控制加载中 loading 状态
      finished: false, // 控制数据加载结束的状态
      timestamp:null, // 用于获取最新的页码
      error: false, // 是否加载失败
      isRefreshLoading: false, // 控制下拉刷新的失败状态
      refreshSuccessText: ''  // 用于提示用户的成功提示
   }
  },
  computed: {},
  watch: {},
  methods: {
       // 初始化或滚动到底部的时候会触发调用 onLoad
      async onLoad() {
        try {
          // 1.请求获取数据
          const res = await articleinfo({
            channel_id: this.channel.id, // 频道 id 
            // 你可以把 timestamp 理解为页码
            // 如果请求第1页数据：当前最新时间戳 Date.now
            // 如果请求之后的数据，使用本次接口返回的数据中的 pre_timestamp
            timestamp: this.timestamp || Date.now(), // 时间戳，请求最新数据传当前的时间戳，请求某一刻的数据就传递具体的一个时间戳
             with_top: 1 // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
          })
          console.log(res);
          // 2.把数据添加到list数组中
          const results = res.data.data.results // 这个是请求回来的数据
          console.log(results);
          this.list.push(...results) // 当前数据叠加每一次更新的数据
          
          // 3. 本次数据加载结束之后要把加载状态设置为结束
          this.loading = false//（隐藏加载中）
          // 4. 判断数据是否全部加载完成：（如果长度为0说明没有数据）
          if(results.length) {
            // 更新获取下一页数据的时间戳
          this.timestamp = res.data.data.pre_timestamp 
          }else {
            this.finished =true // (长度为0，就显示没有更多了)
          }

        }catch(err) {
          console.log('获取文章列表失败',err);
        }
    },
    // 当下拉刷新触碰该函数
      async onRefresh(){
          try {
            // 1. 请求获取数据
             const res  = await articleinfo({
              channel_id: this.channel.id, // 频道 id
              timestamp: Date.now(), // 下拉刷新每次都应该获取最新数据
              with_top: 1 // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
            })
                console.log(res);
              // 2. 将数据追加到列表的顶部
              const  results  = res.data.data.results
              this.list.unshift(...results)

              // 3. 关闭下拉刷新的 loading 状态
               this.isRefreshLoading = false
              // 更新下拉刷新成功提示的文本
              this.refreshSuccessText = `刷新成功，更新了${results.length}条数据`   
          }catch(err){
                this.refreshSuccessText = '刷新失败'
                this.isreFreshLoading = false // 关闭下拉刷新的 loading 状态 
          }
      }
  
},
 created () {
  },
}
</script> 

<style scoped lang="less">
.Article-list {
  height: 79vh;
  overflow-y:auto;
}
</style>